<template>
  <commonPage :contentId="contentId" :upOrgOptions="upOrgOptions">
    <div class="header-left">
      <div class="channal-name" ref="channelName">[{{ route.query.channelName }}]
        <a-tooltip placement="topLeft" v-if="channelNameWidth >= 381">
          <template #title>
            <span>{{ route.query.title }}</span>
          </template>
          <a @click="toLookDetail">{{ route.query.title }}</a>
        </a-tooltip>
        <a @click="toLookDetail" v-else>{{ route.query.title }}</a>
      </div>
      <sapn class="conetnt-text">内容全部评论: {{ route.query.total }}</sapn>
    </div>
  </commonPage>
</template>

<script lang="ts" setup>
import { onMounted, ref, nextTick } from "vue"
import commonPage from './common.vue'
import request from "@/api/index";
import { scrollType, modeProp, dataSourceType } from "@/type.d";
import { useRoute } from "vue-router";

const route = useRoute();
let upOrgOptions = ref<dataSourceType[]>([]);
let channelName = ref<any>(null);
let channelNameWidth = ref<number>(0);
//data 
const contentId = ref<any>(route.query.contentId)
//method

//查看内容详情
const toLookDetail = () => {

}

//获取新增层级树列表
const fetchChannelChannelTree = async () => {
  let datas = await request.fetchChannelChannelTree();
  datas.unshift({ id: '', channelName: '全部' })
  upOrgOptions.value = datas
};

onMounted(() => {
  fetchChannelChannelTree()
  nextTick(() => {
    channelNameWidth.value = channelName.value.offsetWidth
  })
})

</script>

<style lang="less" scoped>
.header-left {
  display: flex;
  flex-direction: row;
  align-items: center;

  .channal-name {
    display: block;
    font-size: 16px;
    line-height: 16px;
    color: #00000073;
    max-width: 381px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .conetnt-text {
    margin-left: 40px;
    font-size: 14px;
    line-height: 14px;
    color: #000000D9;
  }

  a {
    font-size: 16px;
  }
}
</style>